﻿<!DOCTYPE html>
<html lang=en>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
    <div class="wrapper list">
        <ul id="list">
        </ul>
    </div>
    <script type="text/javascript">
    var page = 1;
    var list = document.getElementById("list");

    function loadList() {

        var xhr = new XMLHttpRequest(); //ActiveXObject

        xhr.onreadystatechange = function() {

            if (xhr.status == 200) {

                if (xhr.readyState == 4) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success) {
                        for (var i = 0; i < data.data.length; i++) {
                            var li = document.createElement("li");
                            li.innerHTML = '<div class="list-box"><a href="' + data.data[i].url + '" class="list-img">' +
                                '<img src="' + data.data[i].img + '"/></a><a href="#">' +
                                '<h4 class="title">' + data.data[i].title + '</h4>' +
                                '<p class="description">' + data.data[i].description + '</p></a>' +
                                '<p><span class="privilege">' + data.data[i].privilege + '</span></p>' +
                                '<p class="price-info"><span class="price">' +
                                '<span class="unit">¥</span>' + data.data[i].price + '</span>' +
                                '<span class="worth">价值<span class="strikethough">¥' + data.data[i].worth + '</span>' +
                                '</p><p class="other-info">' + data.data[i].grade + '分<span class="sold">已售' + data.data[i].sold + '</span>' +
                                '</p></div>';
                            list.appendChild(li);
                        }

                        page += 1;
                    } else {
                        alert(data.message);
                    }
                }
            }
        }
        xhr.open("post", "list.json?rand=" + new Date(), true);
        xhr.setRequestHeader("Content-Type", "application/www-x-form-urlencoded");
        xhr.send(null);
    }
    loadList();
    window.onscroll = function() {
        var currTop = document.documentElement.scrollTop || document.body.scrollTop;
        var currHeight = document.documentElement.clientHeight;
        var pageHeight = document.body.clientHeight;
        if ((pageHeight - currHeight - currTop) < 100) {
            console.log(page);
            if (page >= 10) {
                return false;
            }
            loadList();
        }
    }
    </script>
</body>

</html>
